import { FC, useEffect, useState } from "react";
import { Avatar, Badge } from "antd";
import { useDispatch, useSelector } from "react-redux";
import "./index.scss";
import { getChatList } from "@renderer/api";
import { setFrendId } from "@renderer/store/action/frend";

type PropType = {};
const ChatList: FC<PropType> = (props): JSX.Element => {
  const {} = props;
  const dispatch = useDispatch();
  const { activeFrendId } = useSelector((state: any) => state.frend);
  const [chatList, setChatList] = useState([]);

  useEffect(() => {
    const result = getChatList();
    setChatList(result);
  }, []);
  const handleItemClick = (chatId) => {
    dispatch(setFrendId(chatId));
  };
  const isActive = (id) => {
    if (id === activeFrendId) {
      return "chat-item--active";
    } else {
      return "";
    }
  };
  return (
    <div className="chat-list">
      {chatList.length > 0 &&
        chatList.map((item) => {
          const { chatId, chatName, message, time, status, count } = item;
          return (
            <div
              key={chatId}
              className={`chat-item ${isActive(chatId)}`}
              onClick={() => handleItemClick(chatId)}
            >
              <div className="left">
                <Badge size="small" count={count}>
                  {/* <Avatar size={32} src={avatar} /> */}
                  <Avatar size={32}>{chatName.charAt(0)}</Avatar>
                </Badge>
                {/* <img src={avatar}></img> */}
                <div className="wrap">
                  <div className="title">{chatName}</div>
                  <div className="message">{message}</div>
                </div>
              </div>
              <div className="right">
                <div className="time">{time}</div>
                <div className="status">{status}</div>
              </div>
            </div>
          );
        })}
    </div>
  );
};

export default ChatList;
